<template>
  <div class="jgldmk">
    <div class="blueTitleStyle">联动控制信息</div>
    <div class="content mediumtablestyle" >
        <el-table
          :data="getLeftTopLeftdata"
          style="width: 100%"
          height="100%"
          :row-class-name="tableRowClassName"
          border
        >
          <el-table-column prop="deviceName" label="联动设备" :show-overflow-tooltip="true" width="160"></el-table-column>
          <el-table-column prop="value" label="当前状态">
            <template slot-scope="scope">
              <div>{{scope.row.value=='1'?'开':'关'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="控制操作">
            <template slot-scope="scope">
              <el-button @click="Clickstate(scope.row)" type="text">{{scope.row.value=='1'?'关':'开'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
</template>

<script lang="ts">
import { Component,Prop, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";

@Component
export default class extends Vue {
  @Prop() Ldkzxx;
    public get getLeftTopLeftdata() {
    let pointerList = this.Ldkzxx.operationPointerList || [];
    let data = pointerList.map((item) => {
       let devicelist = GetSocketModule.AllAuxiliaryByDeviceId[item.deviceId] || []
        devicelist.map((i) => {
        if (i.remoteType == "2") {
          // 拿引用类型的数据，改变的时候可以改掉原来的那条数据
          item.point = i;
          item.value = i.value;
          item.ztid = i.deviceId;
        }
      });
      return item;
    });

    return data;
  }
  addInframe() {
    // let el-picker-panel el-date-picker el-popper
    window.setTimeout(() => {
      let pickerArr = document.querySelectorAll(".el-message-box__wrapper");
      pickerArr.forEach((item) => {
        let width = item.clientWidth;
        let height = item.clientHeight;
        let iframe: any = item.querySelector("iframe");
        if (!iframe) {
          iframe = document.createElement("iframe");
          item.appendChild(iframe);
        }
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
        iframe.style.position = "absolute";
        iframe.style.top = "0px";
        iframe.style.left = "0px";
        iframe.style.zIndex = 1;
        iframe.style.zIndex = 1;
        iframe.style.pointerEvents = "none";
      });
    }, 100);
  }
  Clickstate(item) {
    this.addInframe()
    var switchs = item.value == "1" ? "关" : "开";
    this.$confirm("是否" + switchs, {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        var params = {
          command: item.command,
          pointerId: item.pointerId,
        };
        (this as any).$services
          .sendPointerCommand({
            data: params,
            method: "post",
            postparams: true,
          })
          .then((res: any) => {
            if(item.point.value=='1'){
              item.point.value = "0";
            }else{
              item.point.value = "1";
            }
            if (res.data) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
}
</script>

<style lang="scss" scoped>
.jgldmk {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: calc(100% - 0.3rem);
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
  }
}
</style>

